<!DOCTYPE html>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  * {
    scrollbar-width: none;
  }

  #container {
    height: 500px;
    overflow: scroll;
    border: 1px solid black;
  }

  #padding {
    height: 300px;
  }

  #rounded-corners-mask {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    overflow: scroll;
    font-size: 40px;
    background-color: orangered;
  }
</style>
<div id="container">
  <div id="rounded-corners-mask">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ultrices neque
    eu nisi facilisis viverra. Integer lacinia, lacus vel condimentum suscipit,
    lacus felis porta nulla, eget lacinia sem neque ut neque. In sagittis, eros
    vel interdum porta, quam ex rhoncus lectus, vitae suscipit risus orci sit
    amet velit. Praesent imperdiet condimentum rutrum. Cras vitae nisl sapien.
    Curabitur ligula diam, tincidunt congue tincidunt nec, sodales nec orci.
    Vestibulum tincidunt non elit in vehicula. Etiam malesuada neque eu porta
    rhoncus. Curabitur vel nunc finibus ligula posuere venenatis.
  </div>
</div>
